<template>
  <div class="bk">
    <h1 class="t1">防 反 贫 数 字 化 监 测 平 台</h1>
    <!-- 添加外层容器使卡片居中 -->
    <form class="password-container">
      <el-card class="password-card">
        <!-- 顶部 -->
        <template #header>
          <h1 style="text-align: center;">忘 记 密 码</h1>
        </template>

        <!-- 表单区域 -->
        <el-form
            label-width="70px"
            class="password-form"
            :model="passwordForm"
            :rules="rules"
            ref="passwordFormRef"
        >
          <!-- 用户名输入框 -->
          <el-form-item label="用 &nbsp户&nbsp名" prop="username">
            <el-input
                type="text"
                v-model="passwordForm.username"
                placeholder="请输入用户名"
            ></el-input>
          </el-form-item>

          <!-- 密码输入框  -->
          <el-form-item label="密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码" prop="password">
            <el-input
                type="password"
                v-model="passwordForm.password"
                placeholder="请输入密码"
            ></el-input>
          </el-form-item>


          <!-- 密码输入框 -->
          <el-form-item label="确认密码" prop="passwords">
            <el-input
                type="password"
                v-model="passwordForm.passwords"
                placeholder="请再次输入密码"
                show-password
            ></el-input>
          </el-form-item>

          <!-- 手机号码 -->
          <el-form-item label="手机号码" prop="phone">
            <el-input
                type="text"
                v-model="passwordForm.phone"
                placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
        </el-form>

        <!-- 底部登录按钮 -->
        <template #footer>
          <div style="text-align: center;" class="ov">
              <el-button type="primary" href="#" target="_blank"  @click.prevent="handleLogin" size="large">确认</el-button>
              <el-button type="primary" href="#" target="_blank"  @click.prevent="handleCancel" size="large">取消</el-button>
          </div>
        </template>
      </el-card>
    </form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import{PasswordAPI}from '@/api/password';

const router = useRouter();
const passwordFormRef = ref(null);

// 忘记密码表单数据
let passwordForm = reactive({
  username: '',
  password: '',
  passwords: '',
  phone: ''
})

function handleLogin() {
  passwordFormRef.value.validate((valid) => {
    if (valid) {
      // 检查两次密码是否一致
      if (passwordForm.password !== passwordForm.passwords) {
        ElMessage.error('两次输入的密码不一致');
        return false;
      }
      
      // 检查手机号格式
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(passwordForm.phone)) {
        ElMessage.error('请输入正确的手机号码');
        return false;
      }
      PasswordAPI(passwordForm).then(res=>{
        if(res.code==2000){
          router.push('/login');
          ElMessage.success('密码重置成功，请登录'); 
        }
        else{
          ElMessage.error('请检查表单输入是否正确');
          return false; 
        }
      })
    }
     else {
      ElMessage.error('请检查表单输入是否正确');
      return false;
    }
  });
}

function handleCancel() {
  router.go(-1);
}



// 表单验证规则 - 修改部分
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' } // 修改：最小长度从2改为3
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
  ],
  passwords: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (value !== passwordForm.password) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(value)) {
          callback(new Error('请输入正确的手机号码（11位，以1开头）'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});
</script>

<style lang="less" scoped>
.bk {
  /* 背景图设置 */
  background-image: url("../assets/background.jpg");
  background-size: cover;       /* 覆盖整个容器 */
  background-position: center;  /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  background-attachment: fixed; 
  
  /* 确保元素填满整个视口 */
  position: fixed;             /* 固定定位，防止滚动 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* 移除默认边距 */
  margin: 0;
  padding: 0;
  
  /* 可选：防止内容溢出 */
  overflow: hidden;
}
.t1{
  margin-top:90px;
  font-size:60px;
  text-align: center;
}

.password-container {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  height: 48vh;
  width: 100%;
}

.password-card {
   align-items: center;
  width: 520px; /* 卡片宽度 */
  border-radius: 15px; /* 圆角 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 阴影 */
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.password-form {
  padding: 20px 30px;

  .el-form-item {
    margin-bottom: 22px;
  }
}
</style>
